<template>
	<view class="container">
		<!-- 景点详情图片展示 -->
		<view class="showimg">
			<img :src="`${IMG_URL}${travel.logo}`" class="showimg">
		</view>
		<!-- 内容主题 -->
		<view class="showmsg">
			<text class="name">{{travel.name}}</text>
			<text class="price">￥{{travel.price}}起/人</text>
			<text class="sale">已售49</text>
			<view class="desc">{{travel.desc}}</view>
		</view>
		<!-- footer -->
		<view class="footer">
			<text class="book" @click="buyTickets">立即购票</text>
			<popup :visible="isPopupVisible" @confirm="handleConfirm" @cancel="handleCancel" />
		</view>
	</view>
</template>

<script setup>
	import {
		userStore
	} from '../../store/userstore.js'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		IMG_URL
	} from "@/utils/imgStatic";
	import popup from "@/pages/travel/popup.vue"
	import {
		http
	} from '../../http.js'

	const store = userStore()

	const travelId = store.detailtravelId

	const num = ref(0)

	const isPopupVisible = ref(false)

	const travel = reactive({
		name: '',
		desc: '',
		local: '',
		logo: '',
		price: ''
	})

	const showDetail = async () => {
		console.log(travelId);
		const res = await http({
			url: 'http://localhost:3000/travel/getTravelById',
			method: "POST",
			data: {
				travelId: travelId,
			}
		})
		if (res.code == 200 && res.msg == 'success') {
			travel.name = res.data[0].name
			travel.desc = res.data[0].desc
			travel.local = res.data[0].local
			travel.logo = res.data[0].logo
			travel.price = res.data[0].price
			console.log(travel, res.data, '11111')
		} else {

		}
	}
	showDetail()

	const buyTickets = () => {
		isPopupVisible.value = true
		console.log('xjh', isPopupVisible.value);
	}
	const handleConfirm = (value) => {
		isPopupVisible.value = false;
		console.log('确认按钮被点击', value.value);
		(async () => {
			const res = await http({
				url: 'http://localhost:3000/order/addorderByuser',
				method: "POST",
				data: {
					travelId: travelId,
					userId: store.userId,
					number: value.value,
					name: travel.name,
					description: travel.desc,
					content: travel.desc,
					totalprice:(value.value*(travel.price*100))/100,
					state: 0,
					img:travel.logo
				}
			})
			if (res.code == 200 && res.msg == 'success') {
				uni.showToast({
					title: '购买成功',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '购买失败',
					icon: 'none'
				});
			}
		})()


	};

	const handleCancel = () => {
		isPopupVisible.value = false;
		console.log('取消按钮被点击或弹窗被关闭');
	};
</script>

<style scoped>
	.container {
		position: relative;
	}

	.showimg {
		width: 100%;
		height: 650rpx;
	}

	.showmsg {
		width: 100%;
		position: absolute;
		top: 320px;
		border-top-right-radius: 5%;
		border-top-left-radius: 5%;
		background-color: #fff;
	}

	.name {
		display: block;
		padding: 12px;
		font-size: 20px;
		font-weight: bold;
	}

	.price {
		display: inline-block;
		padding: 10px;
		font-weight: bold;
		font-size: 16px;
	}

	.sale {
		display: inline-block;
		padding-left: 215px;
		font-size: 13px;
	}

	.desc {
		margin-left: 12px;
		margin-right: 17px;
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: white;
		width: 100%;
		height: 70px;
		border-top: 1px solid lightgray;
	}

	.book {
		display: inline-block;
		border: 1px solid #1E90FF;
		width: 100px;
		height: 35px;
		background-color: #1E90FF;
		text-align: center;
		line-height: 35px;
		font-size: 16px;
		color: white;
		border-radius: 50px;
		margin-left: 260px;
		margin-top: 10px;

	}
</style>
